import { Button, Input, Space } from 'antd';
import { useMemo, useState } from 'react';
import {
  YmAliOssFilePathRuleProvider,
  YmForm,
  YmUpload,
  useYmAliOss,
} from 'ym-design';

const { FormItem } = YmForm;

function MyComp() {
  const customRequest = useYmAliOss('test');
  const [value, setValue] = useState<any>([]);
  const url = useMemo(() => {
    return value[0]?.response;
  }, [value]);

  return (
    <>
      <div hidden={!url}>
        生成的地址是:
        {url ? (
          <a href={url} target="_blank" rel="noreferrer">
            {url}
          </a>
        ) : null}
      </div>
      <YmUpload
        value={value}
        customRequest={customRequest}
        maxCount={1}
        onChange={(value) => setValue(value)}
      ></YmUpload>
    </>
  );
}

const INITIALCONFIG = {
  system: 'Web',
  phone: '12358167307',
  client: 'Boss',
  region: 'oss-cn-hangzhou',
  bucket: 'logibeat-test',
  // accessKeyId: 'o6jf22DofRcUAUgz',
  // accessKeySecret: 'CQgxlwx1yJOnNOrTokcakAKdB27dSF',
};

export default () => {
  const [ossConfig, setOssConfig] = useState<any>({
    ...INITIALCONFIG,
    accessKeyId: '',
    accessKeySecret: '',
  });

  const pathRule =
    `\`https://\${bucket}.\${region}.aliyuncs.com/\${client}/\${phone ?? 'default'}/\${busPath ?? 'default'}/` +
    `\${YYYY + MM}/\${YYYY + MM + DD}_\${HH + mm}_\${uuid()}_\${system}.\${ext}\``;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div>
        <YmForm
          onFinish={(values: any) => {
            console.log('--onFinish--values--:', values);
            setOssConfig(values);
          }}
          onFinishFailed={(errorInfo) => {
            console.log('--onFinishFailed--errorInfo--:', errorInfo);
          }}
          initialValues={INITIALCONFIG}
        >
          <FormItem
            name="system"
            label="system"
            rules={[{ required: true, whitespace: true }]}
          >
            <Input type="text" placeholder="请输入" />
          </FormItem>
          <FormItem name="phone" label="phone">
            <Input type="text" placeholder="请输入" />
          </FormItem>
          <FormItem
            name="client"
            label="client"
            rules={[{ required: true, whitespace: true }]}
          >
            <Input type="text" placeholder="请输入" />
          </FormItem>
          <FormItem
            name="region"
            label="region"
            rules={[{ required: true, whitespace: true }]}
          >
            <Input type="text" placeholder="请输入" />
          </FormItem>
          <FormItem
            name="bucket"
            label="bucket"
            rules={[{ required: true, whitespace: true }]}
          >
            <Input type="text" placeholder="请输入" />
          </FormItem>

          <FormItem
            name="accessKeyId"
            label="accessKeyId"
            rules={[
              { required: true, whitespace: true, message: '请输入访问密钥' },
            ]}
          >
            <Input type="text" placeholder="请输入" />
          </FormItem>

          <FormItem
            name="accessKeySecret"
            label="accessKeySecret"
            rules={[
              { required: true, whitespace: true, message: '请输入访问密钥' },
            ]}
          >
            <Input type="text" placeholder="请输入" />
          </FormItem>
          <FormItem wrapperCol={{ offset: 8 }}>
            <Space direction="horizontal">
              <Button htmlType="submit" type="primary">
                设置AliOss配置项
              </Button>
              <Button htmlType="reset">重置</Button>
            </Space>
          </FormItem>
        </YmForm>
      </div>

      <div>地址的拼接规则如下: {pathRule}</div>
      <YmAliOssFilePathRuleProvider value={ossConfig}>
        <MyComp></MyComp>
      </YmAliOssFilePathRuleProvider>
    </div>
  );
};
